<template>
  <el-dialog title="访问日志查看" @closed="methods.closed" width="70%" ref="dialog" v-model="dialogVisable">
    <el-form :model="props.model" ref="form" label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="访问路径">
            <el-input v-model="props.model.requestPath"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户">
            <el-input v-model="props.model.userName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="IP">
            <el-input v-model="props.model.requestIp"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="访问时间">
            <el-input v-model="props.model.requestTime"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="参数">
            <el-input v-model="props.model.params" :rows="3" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="methods.close" :icon="ButtonIcons.close">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { RequestLog } from '~/types/sys/RequestLog'
import { EditType } from '~/types/ui/EditType'
import { ButtonIcons } from '~/components/xview/button'
import { ref, watch } from 'vue'

const dialogVisable = ref(false)

const props = withDefaults(
  defineProps<{
    editType: EditType
    model: RequestLog
    visable: boolean
  }>(),
  {
    show: false,
    editType: 'view',
    visable: false
  }
)

const emits = defineEmits(['closed', 'update:visable'])

watch(() => props.visable, (val) => {
  dialogVisable.value = val
})
watch(dialogVisable, (val) => {
  emits('update:visable', val)
})

const methods = {
  closed() {
    emits('closed')
  },
  close() {
    dialogVisable.value = false;
  }
}
</script>
